<template>
  <div>
    <h1>商品管理</h1>
    <button v-for="(item, index) in num" :key="index" @click="tab(index)">
      {{ index + 1 }}
    </button>
    <ul id="box">
      <li v-for="item in arr" :key="item.id">
        <img :src="item.img" >
        <p>{{item.goods_name}}</p>
        <p>{{item.price}}</p>
        <p>{{item.stock}}</p>
        <p>{{item.status}}</p>
        <p>{{item.slod}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      num:0,
      arr: [],
    };
  },
  methods: {
    tab(index) {
      axios
        .get(
          `https://liu.zzgoodqc.cn/goodsx/listByPage?+page=${index+1}&limit=5`
        )
        .then((res) => {
          this.arr = res.data.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  mounted() {
      axios
      .get("https://liu.zzgoodqc.cn/goodsx/goodslist")
      .then((res) => {
       this.num = Math.ceil(res.data.data.length / 5);
        })
        .catch((e) => {
          console.log(e);
        });
  },
  computed: {},
};
</script>
<style>

#box{
    width: 1200px;
    margin: auto;
    display: flex;
    text-align: center;
}
#box>li{
    margin-right: 30px;
}
img{
    width: 200px;
    height: 300px;
}
</style>
